﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Areas/SystemAdmin/Master.Master" CodeBehind="Sales.aspx.cs" Inherits="OnlineBusinesses.Areas.SystemAdmin.Sales" %>
<asp:Content ContentPlaceHolderID="ContentSystemAdmin" runat="server" ID="ContentAdmin">
    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;">
        
        <h3 style="font-weight:bold;">Thống kê doanh thu
            <button type="button" class="btn btn-default pull-right hidden-xs hidden-sm" style="margin-right:20px;border-radius:0px;border:1px solid #ddd;padding-top:10px;" value="Back" onclick="history.go(-1);">
                <span class="fa fa-mail-reply" style="font-size:20px;"></span>
            </button>
        </h3>
    <script type="text/javascript">
        $(document).ready(function () {
            var source1 =
            [
                { Browser: 'Autoresponder', Share: 600 },
                { Browser: 'Broadcast', Share: 400 },
                { Browser: 'MailBox', Share: 200 },
                { Browser: 'Customer', Share: 300 },
                { Browser: 'Khuyến mãi', Share: 300 },
                { Browser: 'Kho hàng', Share: 100 },
                { Browser: 'Chăm sóc khách hàng', Share: 800 },
                { Browser: 'Website', Share: 300 },
                { Browser: 'Mail Template', Share: 200 },
                { Browser: 'Affiliate', Share: 200 }
            ];
            var dataAdapter1 = new $.jqx.dataAdapter(source1, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading '); } });
            // prepare jqxChart settings
            var source2 =
            [
                { Browser: 'Tài nguyên', Share: 400 },
                { Browser: 'Người dùng', Share: 200 },
                { Browser: 'Hạn ngạch', Share: 600 }
            ];
            var dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading '); } });

            // prepare jqxChart settings
            var settings = {
                title: "Tổng thu nhập 4.600 USD",
                description: " ",
                enableAnimations: true,
                showLegend: true,
                showBorderLine: false,
                legendLayout: { left: 50, top: 50, width: 600, height: 200, flow: 'vertical' },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },

                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            type: 'donut',
                            offsetX: 'auto',
                            source: dataAdapter1,

                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 120,
                                        initialAngle: 10,
                                        radius: 130,
                                        innerRadius: 90,
                                        centerOffset: 0
                                    }
                                ]
                        },
                        {
                            type: 'donut',
                            offsetX: 'auto',
                            source: dataAdapter2,
                            colorScheme: 'scheme02',

                            //labelRadius: 120,
                            //initialAngle: 15,
                            //radius: 170,
                            //innerRadius: 70,
                            //centerOffset: 0,
                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 120,
                                        initialAngle: 10,
                                        radius: 70,
                                        innerRadius: 30,
                                        centerOffset: 0
                                    }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    </script>
        <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;">
            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:10px;border:1px solid #ddd;">
                    <div class="col-md-4 col-xs-12 col-lg-4 col-sm-12" style="padding:5px;font-size:18px;font-weight:bold;">
                        Thống kê doanh thu
                    </div>
                    <div class="col-md-8 col-xs-12 col-lg-8 col-sm-12" style="padding:5px;">
                        <div class="col-md-3 col-xs-12 col-lg-3 col-sm-12" style="line-height:32px;">Thống kê theo</div>
                        <div class="col-md-3 col-xs-12 col-lg-3 col-sm-12">
                            <select class="input_add">
                                <option selected>Theo tháng</option>
                                <option>Theo quý</option>
                                <option>Năm</option>
                            </select>
                        </div>
                        <div class="col-md-3 col-xs-12 col-lg-3 col-sm-12" style="line-height:32px;">Tùy chọn</div>
                        <div class="col-md-3 col-xs-12 col-lg-3 col-sm-12">
                            <select class="input_add">
                                <optgroup label="Theo tháng">
                                    <option selected>Tháng 1</option>
                                    <option>Tháng 2</option>
                                    <option>...</option>
                                    <option>Tháng 12</option>
                                </optgroup>
                                <optgroup label="Theo quý">
                                    <option>Quý I</option>
                                    <option>Quý II</option>
                                    <option>...</option>
                                    <option>Quý IV</option>
                                </optgroup>
                                <optgroup label="Theo năm">
                                    <option>2013</option>
                                    <option>2014</option>
                                    <option>...</option>
                                    <option>2016</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
            </div>
        </div>
        <div class="col-md-8 col-xs-12 col-lg-8 col-sm-12" style="padding:5px;">
            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" id="chartContainer" style="padding:0px;border:1px solid #ddd;height:578px;">
            </div>
        </div>
        <div class="col-md-4 col-xs-12 col-lg-4 col-sm-12" id="Div1" style="padding:5px;">
            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:10px;border:1px solid #ddd;height:578px;">
                <table class="table table-bordered table-striped" style="margin-bottom:5px;">
                    <thead>
                        <th colspan="2">Thống kê chi tiết</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="vertical-align:middle">
                                Autoresponder
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                600 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Broadcast
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                400 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Mailbox
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                200 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Customer
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                300 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Khuyến mãi
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                300 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Kho hàng
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                100 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Chăm sóc khách hàng
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                800 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Website
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                300 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Mail Template
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                200 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Affiliate
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                200 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Tài nguyên
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                400 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Người dùng
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                200 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                                Hạn ngạch
                            </td>
                            <td style="vertical-align:middle;text-align:center;">
                                600 USD
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle;font-weight:bold;">
                                Tổng
                            </td>
                            <td style="vertical-align:middle;text-align:center;font-weight:bold;">
                                4.600 USD
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</asp:Content>